import {Form, Image, Modal} from 'antd';
import ProTable from '@ant-design/pro-table';
import {showGoods} from "@/services/ant-design-pro/marketing";
import {useState} from "react";
import {Option} from "antd/es/mentions";



const Product = (props) => {
  const {isModalGoodLists,goodListsOk,goodListsCancel} = props
  //  经 Form.useForm() 创建的 form 控制实例
  const [form] = Form.useForm();
  //  定义商品所获取的值
  const [selectKey, setSelectKey] = useState([])


  const columns = [
    {
      title: '商品ID',
      dataIndex: 'id',
      align: 'center',
      search: false,
    },
    {
      title: '图片',
      dataIndex: 'image_url',
      align: 'center',
      search: false,
      render: (_,record)=>{
        return (
          <Image
            width={50}
            src={record.image_url}
          />
        );
      }
    },
    {
      title: '商品名称',
      align: 'center',
      dataIndex: 'product_name',
    },
    {
      title: '商品分类',
      align: 'center',
      dataIndex: 'cate_name',
      search: false,
      render: (_, record)=>{

        return <div>{record.category.data[0].nickname}</div>
      }
    },
  ];

  return (
    <Modal
      width={1000}
      title="商品列表"
      visible={isModalGoodLists}
      onOk={()=>{
        goodListsOk(selectKey.pop())
      }}
      onCancel={goodListsCancel}
    >
      <Form form={form} >
        <ProTable
          rowSelection={{
            type: 'radio',
            onChange:(selectedRowKeys, selectedRows) =>{
              setSelectKey(selectedRows)
            }
          }}
          columns={columns}
          request={async (params={})=> {
            const {data,meta} = await showGoods({...params})
            return{
              data,
              success:true,
              total:meta.pagination.total
            }

          }}
          rowKey="id"
          search={{
            labelWidth: 'auto',
          }}
          form={{
            ignoreRules: false,
          }}
          pagination={{
            pageSize: 5,
          }}
          dateFormatter="string"
        />
      </Form>
    </Modal>
  );
};

export default Product;
